<template>
    <div id="dzgl-box">
      <div class="dzgl-title">电桩管理</div>

    <div class="font-size">
      <p>总电桩数量:{{ All_Number }}</p>
      <p>可用电桩数量:{{ Right_Number }}</p>
      <p>充电的电桩数量:{{ isReady_Number }}</p>
      <p>不可用电桩数量:{{ broken_Number }}</p>
      
    </div>
      
      

    </div>
  </template>
  
<script>
  export default {
    name: 'dzgl',
    created(){
      this.isReady_Number = this.All_Number - this.Right_Number;
    },
    data () {
      return {

        All_Number : 100,
        Right_Number : Math.ceil(Math.random()*100),
        isReady_Number : '',
        broken_Number : '0'
        
      }
    
    }
    
  }
</script>
  
  <style lang="less">
  #dzgl-box {
    width: 20%;
    box-shadow: 0 0 3px blue;
    display: flex;
    margin-left: 20px;
    flex-direction: column;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;
    padding: 0px 30px;
  
    .dzgl-title {
      font-weight: bold;
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 20px;
    }

    .font-size{
      padding-top: 20px;
      font-size: 20px;
      line-height: 40px;
      color : #58a1ff;
    }
  
  
  }
  </style>
  